<div>
<?php echo $this->Form->create('Area')?>
<div class="form-inline">
	<?php
	echo "Add Area";
	?>
	&nbsp;
	<?php 
	echo $this->Form->input('name', array('label' => false, 'id' => 'inputarea', 'div' => false, 'style' => "width : 250px" ));
	?>
	<?php 
	echo $this->Form->input('screen_id', array('type' => 'hidden', 'value' => isset($id)? $id: null, 'id' => 'screen_id'));
	?>
	&nbsp;
	<?php
			echo $this->Form->button('<i class = "icon-plus icon-blue"></i>&nbspAdd',
				array('type' => 'submit', 'id' => 'addarea','class' => 'btn', 'div' => false, 'escape' => false)); 
	?>
</div>
<?php echo $this->Form->end()?>
<div  style = "width : 900px">
	<div class = "form-inline" style = "float: left">
		<?php
			echo "Add Items" ;
		?>
		&nbsp;
		<div class="btn-group" >
			<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"  style = "width : 150px"> 
			Choose Item for Area <span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
				<!-- dropdown menu links -->
				<li><a class = "add" id="label">Label</a></li>
				<li><a class = "add" id="text">Text</a></li>
				<li><a class = "add" id="checkbox">Checkbox</a></li>
				<li><a class = "add" id="link">Link</a></li>
				<li><a class = "add" id="button">Button</a></li>
				<li><a class = "add" id="radio">Radio</a></li>
				
			</ul>
		</div>
	</div>
	<div class="form-inline" style = "float: right">
		<?php
//		echo $this->Html->link('<i class = "icon-eye-open"></i>&nbspView',
//			array('controller' => 'management', 'action' => '#'),
//			array('class' => 'btn', 'div' => false, 'style' => "width : 80px", 'escape' => false )); 
		?>
		&nbsp;
		<?php
//		echo $this->Html->link('<i class="icon-trash icon-black"></i>&nbspDelete',
//			array('controller' => 'management', 'action' => '#'),
//			array('class' => 'btn', 'div' => false, 'style' => "width : 80px", 'escape' => false )); 
		?>
		&nbsp;
		<?php
//		echo $this->Html->link('<i class="icon-edit icon-black"></i>&nbspEdit',
//			array('controller' => 'management', 'action' => '#'),
//			array('class' => 'btn', 'div' => false, 'style' => "width : 80px" , 'escape' => false )); 
		?>
	</div>
</div>
<div id ="popup_add"  class = "popup">
	<button type="button" class="close " data-dismiss="modal" >&times;</button>
	<div class="content" ></div> 
</div>
<br>
<br>
<div id = "content1">
	<div class = "maincontent">
		<div class = "main1">
			<label style = "color: green; font-size: 15px">Area/Items Name</label>
		</div>
		<div class = "main2">
			<label style = "color: green; font-size: 15px">Type</label>
		</div>
		<div class = "main3">
			<label style = "color: green; font-size: 15px">TestCase Num</label>
		</div>
		<div class = "main4">
			<label style = "color: green; font-size: 15px">Unclear Num</label>
		</div>
		<div class = "main5">
			<label style = "color: green; font-size: 15px"></label>
		</div>
	
	</div>
	<div class = "clr"></div>
	<?php 
	if (!empty($areaInfo)):
		foreach ($areaInfo as $data):
			$arr = array();
			if (!empty($data['Label'])){
				$arr[] = "Label";
			}
			if (!empty($data['Text'])){
				$arr[] = "Text";
			}
			if (!empty($data['Checkbox'])){
				$arr[] = "Checkbox";
			}
			if (!empty($data['Link'])){
				$arr[] = "Link";
			}
			if (!empty($data['Button'])){
				$arr[] = "Button";
			}
			if (!empty($data['Radio'])){
				$arr[] = "Radio";
			}
			
//		debug($arr);
	?>
	<div class="maincontent">
		<details>
			<summary style = "width: 100px"><?php echo $data['Area']['name']?></summary>
			<?php 
			foreach ($arr as $arr):
				foreach ($data[$arr] as $dataItem):
					if (!$dataItem['delete_flag']): 
					
			?>
			<div class = "main1" style= "margin-left:20px">
				<?php echo $this->Html->Link($dataItem['item_name'], '#', array('id' => $arr, 'class' => 'show', 'name' => $dataItem['id']));?>
			</div>
			<div class = "main2">
				<?php echo $arr;?>
			</div>
			<div class = "main3">
				number
			</div>
			<div class = "main4">
				number
			</div>
			<div class = "main5">
				<?php
					echo $this->Html->link('<i class="icon-edit icon-black"></i>',
						array('controller' => 'management', 'action' => 'edit_items', $arr, $dataItem['id']),
						array('escape' => false )); 
				?>
				<?php
					echo $this->Html->link('<i class="icon-trash icon-black"></i>',
						array('controller' => 'management', 'action' => 'delete_items', $arr, $dataItem['id']),
						array('escape' => false )); 
				?>
			</div>
			<?php
					endif;
		 		endforeach;
		 	endforeach;
			?>	
		</details>
	</div>
	<?php 
		endforeach;;
	endif;
	?>
</div>

<div id = "popup_msg" class ="popup" style = "width: 300px">
	<div class="modal-header" align ="center" style = "color: green">
	    <button type="button" class="close" data-dismiss="modal" >&times;</button>
	    <?php echo $this->Html->image('msg.png', array('style' => 'width: 50px'));?>
	    <h4>Please enter name area!</h4>
 	 </div>
	<br>
	
</div>
<div id="popup_show" style = "width: 450px" class ="popup" >
	<div class="modal-header " align ="center" style = "color: green">
	    <button type="button" class="close " data-dismiss="modal" >&times;</button>
	    <h3>Item show</h3>
 	 </div>
	<br>
	<div class="content_show" ></div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		// xu ly them Area cho screen
		$("#addarea").click(function() {
			var addarea = $("#inputarea").val();
			if (!addarea){
				$('#popup_msg').bPopup();
				return false;
			}
     	});
		$(".close").click(function(){
			$("#popup_msg").bPopup().close();
		});
		// xy ly them item cho Area :label, text, checkbox, button, link, radio..
		$('a.add').live("click",function(){
			var id = $(this).attr('id');
			var idScreen = $('#screen_id').val();
			var url = "/unit_test/management/items/" + id + '/' + idScreen;
			$('#popup_add').bPopup({
				positionStyle: 'fixed',	
				modalColor: '#333333',
				transition: 'slideDown',	
				contentContainer:'.content',
				loadUrl: url
			});	
		});
		$(".close").click(function(){
			$("#popup_add").bPopup().close();
		});
		// xy ly show items 
		$('a.show').live("click",function(){
			var id = $(this).attr('id');
			var itemName = $(this).text();
			var url = "/unit_test/management/item_show/" + id + '/' + itemName;
//			alert (url);return false;
			$('#popup_show').bPopup({
				positionStyle: 'fixed',	
				modalColor: '#333333',
				transition: 'slideDown',	
				contentContainer:'.content_show',
				loadUrl: url
			});	
		});
		$(".close").click(function(){
			$("#popup_show").bPopup().close();
		});

	});
</script>